<?php
// 【最终完整版】agent.php

// 只引入公共头部，不进行任何PHP登录检查
require_once('common/header.php'); 
?>
<style>
    /* 推广/代理页面专属样式 */
    .page-title-bar { padding: 15px; border-bottom: 1px solid #f0f0f0; background-color: #fff; text-align: center; }
    .page-title-bar h4 { margin: 0; font-weight: 600; font-size: 1.1rem; }
    .promo-banner { padding: 15px; }
    .promo-banner img { width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .main-controls { display: flex; align-items: center; padding: 0 15px 15px; }
    .main-controls .btn-add-agent { flex-shrink: 0; margin-right: 10px; font-weight: 500; }
    #agent-filter-form .input-group { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-radius: 8px; }
    #agent-filter-form .form-control { border-right: none; }
    #agent-filter-form .btn { border-left: none; }
    
    .stats-grid { display: flex; justify-content: space-between; gap: 10px; padding: 0 15px 15px; }
    .stat-item { flex: 1; padding: 10px; border-radius: 10px; color: white; text-align: center; }
    .stat-item .value { font-size: 1.5rem; font-weight: bold; }
    .stat-item .label { font-size: 0.8rem; }
    .bg-purple { background: linear-gradient(135deg, #8971ea, #6e48d9); }
    .bg-orange { background: linear-gradient(135deg, #fec163, #fd9d2e); }
    .bg-green { background: linear-gradient(135deg, #5dd39e, #36b887); cursor: pointer; }

    .list-title-bar { padding: 15px; font-weight: 600; font-size: 1.1rem; border-top: 8px solid #f8f9fa; }
    
    .agent-card-new { display: flex; align-items: center; padding: 1rem; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .agent-avatar-new { width: 48px; height: 48px; border-radius: 50%; background-color: #f0f3ff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bs-primary); font-weight: bold; margin-right: 12px; flex-shrink: 0; }
    .agent-info-new { flex-grow: 1; }
    .agent-info-new h5 { font-size: 1rem; font-weight: 600; margin-bottom: 2px; }
    .agent-info-new p { font-size: 0.8rem; color: var(--bs-gray); margin-bottom: 2px; line-height: 1.4; }
    
    .commission-box {
        flex-shrink: 0; width: 80px; height: 80px;
        border-radius: 50%; color: white;
        background: linear-gradient(45deg, #007bff, #0056b3);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        margin-left: 10px; text-align: center;
    }
    .commission-value { font-size: 1.4rem; font-weight: 700; line-height: 1; }
    .commission-label { font-size: 0.7rem; opacity: 0.9; margin-top: 2px; }
</style>

<div id="agent-app" v-cloak>
    <div class="page-title-bar"><h4>代理管理</h4></div>

    <div class="main-controls mt-3">
        <a href="register.html" class="btn btn-primary btn-add-agent"><i class="bi bi-plus-circle me-1"></i>添加代理</a>
        <form id="agent-filter-form" class="w-100" @submit.prevent="loadAgents">
            <div class="input-group">
                <input type="text" class="form-control" v-model="keyword" placeholder="名称/账号/手机号">
                <button class="btn btn-light" type="button" @click="loadAgents"><i class="bi bi-search"></i></button>
            </div>
        </form>
    </div>

    <div class="stats-grid">
        <div class="stat-item bg-purple"><div class="value">{{ stats.total_agents }}</div><div class="label">总代理</div></div>
        <div class="stat-item bg-orange"><div class="value">{{ stats.active_agents }}</div><div class="label">有效代理</div></div>
        <div class="stat-item bg-green" @click="copyLink"><div class="value"><i class="bi bi-link-45deg"></i></div><div class="label">招募链接</div></div>
    </div>
    
    <div class="list-title-bar">下级代理列表</div>
    <div id="agent-list-container" class="px-2">
        <div v-if="isLoading" class="text-center p-5"><div class="spinner-border text-primary"></div></div>
        <div v-else-if="agents.length > 0">
            <div class="agent-card-new mb-2" v-for="agent in agents" :key="agent.id">
                <div class="agent-avatar-new">{{ agent.name ? agent.name.charAt(0).toUpperCase() : '?' }}</div>
                <div class="agent-info-new">
                    <h5>{{ agent.name }} ({{ agent.account }})</h5>
                    <p>真实姓名: {{ agent.real_name || '未实名' }}</p>
                    <p>手机号: {{ agent.phone || '未填写' }}</p>
                </div>
                <div class="commission-box">
                    <div class="commission-label">贡献佣金</div>
                    <div class="commission-value">￥{{ agent.commission_contribution }}</div>
                </div>
            </div>
        </div>
        <div v-else class="text-center p-5 text-muted">您还没有下级代理</div>
    </div>
</div>

<?php require_once('common/footer.php'); ?>